<template>
    <card class="summary-con" :id="'summaryFrom_'+(index+1)" :class="{'append-case-con':data.type=='APPEND'}">
        <p slot="title">{{caseType}}小结<span v-if="data.type=='NORMAL'">{{index+1}}</span></p>
        <span slot="extra" @click.prevent="deleteSummaryDiv($event)">
            <Icon type="close-round" color="#495060"></Icon>
        </span>
        <Form inline :ref="'formValidate_'+(index+1)" :model="formValidate" :rules="ruleValidate">
             <Row>
                <Col span="5">
                    <FormItem label="来电号码" :label-width="80" prop="telNo"><Input v-model="formValidate.telNo" :disabled="formItemDisabled"></Input></FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="学生ID" :label-width="80"><Input :value="data.stuId" disabled></Input></FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="学生姓名" :label-width="80"><Input :value="data.stuName" disabled></Input></FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="用户姓名" :label-width="80"  prop="customerName"><Input v-model="formValidate.customerName" :disabled="formItemDisabled"></Input></FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <FormItem label="问题大类" :label-width="80" prop="baseLevel">
                        <Select  v-model="formValidate.baseLevel" style="width:200px;" :disabled="formItemDisabled">
                            <Option v-for="item in mainQuestionTypeList" :value="item" :key="item">{{item}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="6" offset="2">
                    <FormItem label="问题类型" :label-width="80" prop="question_type">
                        <questionTypeList v-on:changeQuestionType="getChoseQuestiontype" :disabled="formItemDisabled"></questionTypeList>
                       
                    </FormItem>
                </Col>
            </Row>
            <Row style="margin-bottom:25px;" v-show="isShowWordTemplate">
                <Col span="12">
                    <div class="wordTemplateCon">
                        <p class="title">诊断思路</p>
                        <p class="content">{{questionWordTemplate}}</p>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="小结内容" :label-width="80" prop="content">
                        <Input type="textarea" :rows="6" style="width:500px;"  v-model="formValidate.content" :disabled="formItemDisabled"></Input>
                    </FormItem>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12" style="margin-left:80px;">
                    <FormItem>
                        <a class="caseBtn create-btn" v-if="isShowCreateTaskBtn && type!='callout'" @click="showCreateTaskDiv">新建工单</a>
                        <a class="caseBtn book-btn" v-if="isShowCreateTaskBtn && type!='callout' && data.type!='APPEND'" @click="showBookingDiv">预约</a>
                        <Button type="primary" v-if="!isShowCreateTaskBtn || type=='callout'"  @click="saveSummary('formValidate_'+(index+1))">保存</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </card>
</template>
<style scoped>
    .summary-con {
        text-align: left;
        margin-top: 30px;
    }
    
    .wordTemplateCon {
        border: 1px solid #e9eaec;
        border-radius: 5px;
        margin-left: 80px;
    }
    
    .wordTemplateCon .title {
        border-bottom: solid 1px #e9eaec;
        padding: 5px;
    }
    
    .wordTemplateCon .content {
        padding: 5px;
    }
    
    .caseBtn {
        display: inline-block;
        border-radius: 4px;
        padding: 6px 15px;
        color: #fff;
        cursor: pointer;
        transition: all .2s linear;
        font-size: 12px;
        user-select: none;
        line-height: 1.5;
        font-weight: 400;
    }
    
    .create-btn {
        background-color: #2d8cf0;
        border-color: #2d8cf0;
    }
    
    .book-btn {
        background-color: #19be6b;
        border-color: #19be6b;
    }
    
    .append-case-con {
        width: 900px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -450px;
        margin-top: -210px;
        z-index: 200;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
    }
</style>
<style>
    .summary-con textarea {
        resize: none;
    }
    
    .v-transfer-dom {
        position: relative;
        z-index: 30000;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import createSummaryComponent from './createSummaryComponent'
    import createTask from '../task/createTask'
    import telephoneBooking from './telephoneBooking'
    import caseService from 'service/caseService'
    import questionTypeList from 'components/formItem/questionTypeList.vue'
    import appendCaseComponent from 'components/voiceCall/appendCase.js'

    export default {
        name: 'createSummary',
        props: {
            data: Object,
            index: Number,
            type: String
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo',
                //  create_summary_count: 'create_summary_count'
            })
        },
        components: {
            questionTypeList
        },
        data() {
            return {
                caseType: '',
                formItemDisabled: false,
                caseId: '',
                formValidate: {
                    connId: this.data.connId,
                    baseLevel: '',
                    telNo: this.data.telNo,
                    customerName: '',
                    question_type: [],
                    content: ''
                },
                ruleValidate: {
                    telNo: [{
                        required: true,
                        message: '电话号码不能为空',
                        trigger: 'blur'
                    }],
                    baseLevel: [{
                        required: true,
                        message: '请选择问题类型大类！',
                        trigger: 'change'
                    }],
                    question_type: [{
                        required: true,
                        type: 'array',
                        message: '请选择问题类型！',
                        trigger: 'change'
                    }],
                    content: [{
                        required: true,
                        message: '请填写小结内容！',
                        trigger: 'blur'
                    }, {
                        type: 'string',
                        max: 1000,
                        message: '不能超过1000字',
                        trigger: 'blur'
                    }]
                },
                mainQuestionTypeList: ['咨询', '投诉', '其他'],
                isShowCreateTaskBtn: false,
                isShowWordTemplate: false,
                questionWordTemplate: ''
            }
        },
        created() {
            this.caseType = this.data.type == 'NORMAL' ? '新建' : '补单'
        },

        methods: {
            deleteSummaryDiv(event) {
                let vm = this
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认关闭该小结吗？</p>',
                    onOk: () => {
                        console.log(this.data.type)
                        if (this.data.type == 'NORMAL') {
                            let node = event.target.parentNode.parentNode.parentNode
                            vm.$store.dispatch('DelCreateSummaryCount')
                            createSummaryComponent.remove(node);
                        } else if (this.data.type == 'APPEND') {
                            appendCaseComponent.remove()
                        }

                    },
                    onCancel: () => {

                    }
                });

            },
            //保存小结
            saveSummary(name) {
                let questionTypeData = {}
                if (this.formValidate.question_type) {
                    this.formValidate.question_type.forEach(function(value, index) {
                        if (index === 0) {
                            questionTypeData.levelOne = value
                        } else if (index === 1) {
                            questionTypeData.levelTwo = value
                        } else if (index === 2) {
                            questionTypeData.levelThree = value
                        } else if (index === 3) {
                            questionTypeData.levelFour = value
                        }
                    })
                }

                let vm = this
                this.$refs[name].validate(async(valid) => {
                    if (valid) { //验证成功
                        let creatorUserObj = {
                            "creatorGroupId": this.loginUserInfo.curHandlerGroupId,
                            "creatorGroupName": this.loginUserInfo.curHandlerGroupName,
                            "creatorName": this.loginUserInfo.curHandlerName,
                            "creatorId": this.loginUserInfo.curHandlerId
                        }

                        let telNo = this.formValidate.telNo.indexOf('*') > -1 ? this.data.mobileNo : this.formValidate.telNo
                        let data = Object.assign(this.data, this.formValidate, creatorUserObj, questionTypeData, {
                            telNo: telNo
                        })

                        let jsondata = await caseService.createCase(data)

                        // vm.$Message.success(response.msg);
                        if (jsondata.state) {
                            vm.formItemDisabled = true
                            vm.caseId = jsondata.data.caseId
                            vm.$Modal.success({
                                title: '提示',
                                content: jsondata.msg
                            });
                            vm.isShowCreateTaskBtn = true
                        } else {
                            vm.$Modal.warning({
                                title: '提示',
                                content: jsondata.msg
                            });

                        }


                    }
                })
                if (this.data.type == 'APPEND') {
                    eventBus.$emit('refreshCallHistory')
                }



            },
            showCreateTaskDiv() {
                let propsdata = Object.assign(this.data, this.formValidate, {
                    'propId': this.caseId,
                    'type': 'create'
                })
                createTask.showCreateTask({
                    'data': propsdata,
                    'remove': createTask.remove
                })
            },
            showBookingDiv() {
                let telNo = ''
                telNo = this.formValidate.telNo.indexOf('*') > -1 ? this.data.mobileNo : this.formValidate.telNo
                let caseData = Object.assign(this.loginUserInfo, this.formValidate, {
                    'caseId': this.caseId,
                    'stuId': this.data.stuId,
                    'stuName': this.data.stuName,
                    'telNo': telNo //预约回拨的是 填写的电话号码  默认是来电号码  不加密

                })

                telephoneBooking.showTelephoneBooking({
                    'caseData': caseData,
                    'remove': telephoneBooking.remove,

                })
            },

            getChoseQuestiontype(data) {
                let index = parseInt(data.selectedData.length - 1)
                this.questionWordTemplate = data.selectedData[index].attributes.element
                this.isShowWordTemplate = true
                this.formValidate.question_type = data.value

            }

        }

    }
</script>